<template>
  <div class="c-p" :class="equalParentWidth ? 'c-w100 c-h': ''">
    <!-- 常规显示封面图 -->
    <template v-if="imgShowType == 'common'">
      <img :src="getVipCustomImg" alt="" :class="equalParentWidth ? (imgClass+' c-w100') : imgClass"/>
    </template>
    <!-- 高斯模糊封面图 -->
    <template v-if="imgShowType == 'blur'">
      <CoverImg :coverSizeClass="coverSizeClass" :imgClass="equalParentWidth ? (imgClass+' c-w100') : imgClass" :coverUrl="getVipCustomImg" />
    </template>
    <!-- 微页面自定义封面图 -->
    <template v-if="imgShowType == 'custom'">
      <custom-img class="c-w100 c-h c-text-hidden" :borderRadiusPosition="borderRadiusPosition" :borderRadius="borderRadius" :imageSetting="imageSetting" :url="getVipCustomImg"></custom-img>
    </template>
    <div
      v-if="hasText && cover && cover.coverType==1"
      class="c-pa c-h c-flex-column c-justify-sb c-p-l0 c-p-t0 c-pz1"
      :class="[equalParentWidth ? 'c-w100': '', fontClass.boxStyle, textUrlColor]">
      <span :class="fontClass.name">{{content.name}}</span>
      <span :class="fontClass.duration" v-if="content.duration<0">永久</span>
      <span :class="fontClass.duration" v-else>{{String(content.duration) + (content.durationType == 1 ? '个月' : '天')}}</span>
    </div>
  </div>
</template>

<script>
import CoverImg from '@/components/templates/common/coverImg.vue';
import CustomImg from '@/components/templates/customImg.vue'
export default {
  name: 'VipCustomImg',
  props: {
    cover: {
      type: Object,
      default: () => {
        return {
          coverType: null,
          coverUrl: null,
        }
      }
    },
    isBigImg: {
      type: Boolean,
      default: false,
    },
    hasText: {
      type: Boolean,
      default: true,
    },
    imgClass: {
      type: String,
      default: ''
    },
    equalParentWidth: {
      type: Boolean,
      default: true,
    },
    fontClass: {
      type: Object,
      default: () => {
        return {
          boxStyle: 'c-pt40 c-pb48 c-pl12',
          name: 'c-text-ellipsis1 c-fw-b c-fs32',
          duration: 'c-fs26',
        }
      }
    },
    content: {
      type: Object,
      default: () => {
        return {
          name: '',
          duration: '',
          durationType: '',
        }
      }
    },
    coverUrl: { // 封面信息只有路径时传这个
      type: String,
      default: ''
    },
    prodType: { // 产品类型
      type: [String, Number],
      default: ''
    },
    imageSetting: { // 图片设置
      type: Object,
      default: () => {}
    },
    borderRadiusPosition: { // 图片圆角方向
      type: String,
      default: ''
    },
    isBlur: { // 是否高斯模糊背景
      type: Boolean,
      default: false
    },
    coverSizeClass:{
      type: String,
      default: 'c-w100 c-h'
    },
    imgShowType: {
      type: String,
      default: 'common', // common：普通展示 blur: 高斯模糊 custom: 微页面自定义
    }
  },
  components: { CoverImg, CustomImg },
  data() {
    return {
      cfrom: global.ckFrom
    }
  },
  computed: {
    getVipCustomImg() {
      if (this.cover && this.cover.coverType == 2 && this.cover.coverUrl) {
        return this.$addXossFilter(this.cover.coverUrl)
      } else if (!this.isBigImg && this.cover && this.cover.coverType == 1 && this.cover.coverUrl) {
        return require('@/assets/i/wap/vip/vip-bg-mb' + this.cover.coverUrl + '.png')
      } else if (this.isBigImg && this.cover && this.cover.coverType == 1 && this.cover.coverUrl) {
        return `https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/vip/vipCollage-bg-mb${this.cover.coverUrl}.png`
      } else {
        return this.getDefultImg()
      }
    },
    textUrlColor() {
      const colorMap = {
        1: 'c-fc-sblown',
        2: 'c-fc-blue',
        3: 'c-fc-xxblue',
        4: 'c-fc-xpink',
      }
      return colorMap[this.cover.coverUrl]
    },
  },
  methods: {
    getDefultImg() {
      let defultImgArr = {
        1: require('@/assets/i/wap/course/vip.png'),
        8: require("@/assets/i/wap/datum/datumsDefault.png"),
        11: require('@/assets/examination_defult.png'), //测评
        23: require('@/assets/i/wap/course/svip.png'),
        31: require('@/assets/i/wap/course/vip.png'),
        32: require('@/assets/i/wap/course/svip.png'),
        42: require("@/assets/agentApply.png"),
        43: require("@/assets/agentApply.png"),
        44: require("@/assets/agentApply.png"),
        138: require("@/assets/agentApply.png"),
        139: require("@/assets/agentApply.png"),
        160: require("@/assets/agentApply.png"),
        161: require("@/assets/agentApply.png"),
        162: require("@/assets/agentApply.png"),
        163: require("@/assets/agentApply.png"),
        183: require('@/assets/shareholderApply.png'), //升级股东
        190: require('@/assets/i/wap/giftCard/gift_card_icon.png'),
        200: require('@/assets/shareholderPayVoucher.png'), //股东付费抵用券
      }
      console.log(this.prodType, 'this.prodType')
      return this.$addXossFilter(this.coverUrl || defultImgArr[this.prodType] || require('@/assets/defult270.png'));
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .w180 {
    width: 180px;
  }
  .w200 {
    width: 200px;
  }
  .h200 {
    height: 200px;
  }
  .br10 {
    border-radius: 10px;
  }
</style>
